<template>
    <view class="content" v-if="isShow">
        <image src="../../static/image/bg_2.png" class="bg"></image>
		
		<view class="wrapper">
			<view class="top" v-if="(role == 1 || role == 3) && data">
				<view class="i-top" @click="toPage(`/pages/train-manage/list?type=0`)">
					<view class="num">{{data.sq}}</view>
					<view>培训申请</view>
				</view>
				<view class="i-top" @click="toPage(`/pages/train-manage/list?type=1`)">
					<view class="num">{{data.dfp}}</view>
					<view>待分配</view>
				</view>
				<view class="i-top" @click="toPage(`/pages/train-manage/list?type=2`)">
					<view class="num">{{data.dhf}}</view>
					<view>待回访</view>
				</view>
				<view class="i-top" @click="toPage(`/pages/train-manage/list?type=3`)">
					<view class="num">{{data.yc}}</view>
					<view>延迟课单</view>
				</view>
			</view>
			
			<view class="top top2" v-if="role == 4 && data">
				<view class="i-top" @click="toPage(`/pages/train-manage/list?type=4`)">
					<view class="num">{{data.wwc}}</view>
					<view>未完成</view>
				</view>
				<view class="i-top" @click="toPage(`/pages/train-manage/list?type=5`)">
					<view class="num">{{data.ywc}}</view>
					<view>已完成</view>
				</view>
			</view>
			
			<view class="down">
				<view class="nav" v-if="role == 1 || role == 2" @click="toPage(`/pages/staff/staff`)">
					<image src="../../static/image/index_1.png" class="index-1"></image>
					<view>员工管理</view>
				</view>
				<view class="nav" @click="toPage(`/pages/order/order`)">
					<image src="../../static/image/index_2.png" class="index-1"></image>
					<view>开卡订单</view>
				</view>
				<view class="nav" v-if="role == 1 || role == 5" @click="toPage(`/pages/report/report`)">
					<image src="../../static/image/index_3.png" class="index-1"></image>
					<view>报告解读记录</view>
				</view>
				<view class="nav" v-if="role == 1 || role == 5" @click="toPage(`/pages/checkup/list`)">
					<image src="../../static/image/index_4.png" class="index-1"></image>
					<view>体检预约记录</view>
				</view>
				<view class="nav" @click="toPage(`/pages/count/achievement`)">
					<image src="../../static/image/index_5.png" class="index-1"></image>
					<view>业绩统计</view>
				</view>
				<view class="nav" v-if="role == 3" @click="toPage(`/pages/count/train`)">
					<image src="../../static/image/index_6.png" class="index-1"></image>
					<view>培训统计</view>
				</view>
			</view>
		</view>
		
		<view class="footer" v-if="isLogin" @click="logOut">退出登录</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: {},
				role: 1,//1超级管理员 2人力资源 3内勤 4外勤 5运营客服
				isShow: false,
				isLogin: 0,
            };
        },
        onLoad() {
            uni.$on('LOGIN', data => {
                this.isLogin = 1
            })
        },
		onShow() {
			if (this.$getSync('userToken')) {
				this.isLogin = 1
			} else {
				this.$gTo(`/pages/login/login`)
			}
			
			if (this.$getSync('roleId')) {
				this.role = this.$getSync('roleId')
				console.log('this.role', this.role)
			}
			
			this.getIndexData()
		},
        methods: {
			// 退出登录
			logOut() {
			    this.$confirm('确定退出登录吗？', () => {
			        this.isLogin = 0
			        uni.removeStorageSync('userToken')
			        uni.removeStorageSync('userInfo')
			        uni.removeStorageSync('roleId')
					this.$gTo(`/pages/login/login`)
			    })
			},
			
            toPage(url) {
				if (!this.$getSync('userToken')) {
					this.$gTo(`/pages/login/login`)
				} else {
					this.$gTo(url)
				}
			},
			
			getIndexData() {
				this.$ajax('staff_index', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
						this.data = ret.data
						this.isShow = true
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.bg{
		width: 750rpx;
		height: 360rpx;
	}
	.wrapper{
		width: 750rpx;
		padding: 40rpx 20rpx;
		position: absolute;
		top: 300rpx;
		// top: 240rpx;
		left: 0;
	}
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}
	.top2{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.i-top{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}
	.num{
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.down{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.nav{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 225rpx;
		height: 225rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #626365;
		margin-right: 19rpx;
		margin-bottom: 19rpx;
	}
	.nav:nth-child(3n){
		margin-right: 0;
	}
	.index-1{
		width: 93rpx;
		height: 93rpx;
		margin-bottom: 15rpx;
	}
	
	.footer{
	    width: 100%;
	    height: 95rpx;
	    background-color: #fff;
	    font-size: 34rpx;
	    color: #01b8bd;
	    font-weight: bold;
	    line-height: 95rpx;
	    text-align: center;
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    z-index: 9;
	}

</style>
